<template>
   <div class="bg-white">
    <div class="flex items-center justify-center py-6  border-b border-gray-200">
      <span class="text-gray-500">{{ paperInfo.paperName }}</span>
    </div>
    <!-- 搜索和按钮部分 -->
     <div class="flex items-center justify-between px-6 py-4 bg-white relative"> 
      <div class="flex-1">
          <el-select v-model="classSelect"  class="w-60" >
            <el-option  v-for="clazz in classInfos" :key="clazz.id"  :label="clazz.className" :value="clazz.classId" >
                <div class="flex items-center justify-between ">
                    <span>{{ clazz.className }}</span>
                    <span class="text-xs text-white bg-orange-700/70 py-1 px-2 rounded-lg">待批{{ clazz.awaitingNumber }}</span>
                </div>
            </el-option>
          </el-select>
      </div>
      <div class="flex-1 flex items-center justify-end gap-4 right-div">
        <div class="flex items-center gap-4" @click="securityDialogVisible=true">
          <span class="text-blue-900/75 whitespace-nowrap text-sm cursor-pointer" @click="publishAgain">
            <font-awesome-icon :icon="['fa', 'file-circle-plus']"  />
            发布补考
          </span>
          <span  class="text-blue-900/75 whitespace-nowrap text-sm cursor-pointer"  @click="exportScore">
             <font-awesome-icon :icon="['fas', 'arrow-up-from-bracket']"  />
             导出成绩
          </span>
          <span  class="text-blue-900/75 whitespace-nowrap text-sm cursor-pointer"  @click="examStatistics">
             <font-awesome-icon :icon="['fas', 'chart-line']"  />
             考试统计
          </span>
          <el-dropdown trigger="hover">
            <!-- <el-button  link>导出全部</el-button> -->
                 <span class="text-blue-900/75 whitespace-nowrap text-sm">
                    <font-awesome-icon :icon="['fas', 'fa-ellipsis-h']"  class="fa-rotate-90" />
                 更多
                </span  >
                <template template #dropdown>
                  <el-dropdown-menu class="import-dropdown">
                    <el-dropdown-item >导入成绩</el-dropdown-item>
                    <el-dropdown-item>导出考试附件</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
          </el-dropdown>
        </div>
        <el-input v-model="keyword" placeholder="请输入姓名或学号" style="width: 200px">
        </el-input>
        <el-icon  class="z-10 text-gray-400 absolute right-[30px] top-[25px] text-xl">  <Search /></el-icon>
      </div>
    </div>
    
    <!-- 数据展示 -->
     <div class="px-6 py-4">
         <el-tabs v-model="activeTabName" class="demo-tabs" @tab-click="handleClickTabs">
            <el-tab-pane label="按人批阅" name="byPeople">
                <!-- {{ paperTableData }} {{classSelect }}  -->
                <div class="flex items-center justify-between my-4">
                    <el-radio-group v-model="submitStatus" size="large">
                      <el-radio value="submitted">已交</el-radio>
                      <el-radio value="unSubmit">未交</el-radio>
                    </el-radio-group>  
                    <div v-if="selectedClass" class="text-sm text-gray-400">
                        <span>全部 <b>{{selectedClass.stuNumber }}</b> 名学生，已交 <b>{{ selectedClass.submitNumber }}</b> ,未交 <b>{{ selectedClass.unSubmitNumber }}</b></span>
                    </div>

                </div>
                
                <el-table 
                    :data="paperTableData" 
                    stripe 
                    style="width: 100%"   >
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="name" label="姓名"/>
                    <el-table-column prop="studentId" label="学号/工号"/>
                    <el-table-column prop="examTime" label="领取时间" sortable>
                        <template #default="scope">
                            {{ formatTime(scope.row.examTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="submitTime" label="提交时间" sortable>
                        <template #default="scope">
                            {{ formatTime(scope.row.submitTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="duration" label="考试用时" sortable/>
                    <el-table-column prop="ip" label="提交ip"/>
                    <el-table-column prop="accuracy" label="正确率">
                        <template #default="scope">
                            {{ scope.row.accuracy }}%
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态"/>
                    <el-table-column prop="reviewTime" label="批阅时间"/>
                    <el-table-column prop="reviewer" label="批阅人"/>
                    <el-table-column prop="score" label="成绩">
                        <template #default="scope">
                           <el-input v-model="scope.row.score" class="w-16"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作" width="120px">
                        <template #default="scope">
                            <el-button type="primary"  class="font-bold" link @click="handleReview(scope.row)">批阅</el-button>
                            <el-button type="primary"  link @click="handleBack(scope.row)">打回</el-button>
                        </template>
                    </el-table-column>

                </el-table>

            </el-tab-pane>
            <el-tab-pane label="按题批阅" name="byQuestion">
              <div class="flex items-center justify-end my-4">
                    <div v-if="selectedClass" class="text-sm text-gray-400">
                        <span>全部 <b>{{selectedClass.stuNumber }}</b> 名学生，已交 <b>{{ selectedClass.submitNumber }}</b> ,未交 <b>{{ selectedClass.unSubmitNumber }}</b></span>
                    </div>

                </div>
                 <el-table
                    :data="subjectiveQuestions" 
                    stripe 
                    style="width: 100%"   >
                    <el-table-column  label="题序" type="index" width="80px"/>
                    <el-table-column prop="content" label="题目"/>
                    <el-table-column prop="type" label="题型" width="120px"/>
                    <el-table-column prop="waiting" label="待批阅" width="120"/>
                   <el-table-column  label="操作" width="200">
                        <template #default="scope" >
                            <el-button type="primary"  class="font-bold" link @click="handleQuestionReview(scope.row)">批阅</el-button>
                            <el-button type="primary"  link @click="handleLook(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>    

            </el-tab-pane>
        </el-tabs>
     </div>
     <!-- 打回的dialog -->
      <el-dialog v-model="backDialogVisible" title="删除"  width="20%" class="rounded-lg">  
      <div class="text-base  px-2 text-gray-500">
        <el-input v-model="backForm.backReason" type="textarea" :rows="4" placeholder="打回理由"></el-input>
      </div>
         <template #header="{ close, titleId, titleClass }">
          <div class="my-header border-b pb-4">
            <span :id="titleId" :class="titleClass">
              打回
            </span>
            
          </div>
        </template>
      <template #footer>
          <div class="py-4 px-6 border-t flex items-center justify-end">
            <div class="flex gap-4">
              <el-button @click="backDialogVisible=false" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="confirmBack" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>
     </el-dialog> 

    </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {getPaperReviewData} from '@/api/exam.js'
import { useTabsStore } from '@/store/tabs'
import {useQuestionReviewStore} from '@/store/questionReview'
import { usePaperStore } from '@/store/paper'
import { dayjs } from 'element-plus'
//格式时间  MM-dd HH:mm
const formatTime = (time) => {
    return dayjs(time).format('MM-DD HH:mm')
}

const  tabsStore = useTabsStore()
const  paperStore = usePaperStore()
const  questionReviewStore = useQuestionReviewStore()

const route = useRoute()
const router = useRouter()
const paperId = computed(() => route.params.paperId||questionReviewStore.paperId||'')

// 搜索框的关键词 姓名或者学号
const keyword = ref('')  

// 试卷基本信息
const paperInfo = ref({})
// 对应考试班级
const classInfos = ref([])
// 所有试卷批阅数据
const studentPaperInfos=ref([])

// 下拉选 根据班级展示试卷数据
const classSelect = ref(null)
//试卷中的主观题目
const subjectiveQuestions = ref([])
const getReviewData =  () => {
     getPaperReviewData(paperId.value).then(res => {
      paperInfo.value = res.data.data.paperInfo
      subjectiveQuestions.value = res.data.data.paperInfo.subjectiveQuestions
      classInfos.value = res.data.data.classInfos
      studentPaperInfos.value = res.data.data.studentPaperInfos
      classSelect.value = classInfos.value[0].classId
      console.log(paperInfo.value, classInfos.value, studentPaperInfos.value, '页面所有试卷批阅数据');
    }) 
}


// 表格对应的数据 
const paperTableData = computed(() => { 
  return studentPaperInfos.value.filter(item => item.classId === classSelect.value)
})

//切换tabs
const activeTabName = ref('byPeople')
const handleClickTabs = (tab) => { 
  console.log(tab.props.name);
}

// 已交 未交
const submitStatus = ref('submitted')
// 被选择的班级
const selectedClass = computed(() => {
  return classInfos.value.find(item => item.classId === classSelect.value)
})

// 批阅
const handleReview = (row) => {
  console.log(row);
  tabsStore.addTab({
      name: 'Review',
      title: '批阅',
    });
    router.push({name:'Review',params:{paperId:row.id}})

}

// 打回
// 打回的dialog
const backDialogVisible = ref(false)
// 打回原因
const backForm =  reactive({
    backReason : '',
    studentId : ''
}) 
const handleBack = (row) => {
  console.log(row);
  backForm.studentId = row.studentId

  backDialogVisible.value = true
}
// 确认打回
const confirmBack = () => {
  backDialogVisible.value = false
  // 打回接口
  console.log(backForm);
}
// 按照题目批阅
const   handleQuestionReview = (row) => {
  console.log(row,paperId.value,'<<<<<题目批阅');
  tabsStore.addTab({
      name: 'ReviewByQuestion',
      title: '按题目批阅',
    });
    questionReviewStore.paperId = paperId.value
    questionReviewStore.questionId = row.id
    router.push({name:'ReviewByQuestion',params:{paperId:paperId.value,questionId:row.id}})
}
// 查看
const handleLook = (row) => {
  console.log(row);
  tabsStore.addTab({
      name: 'DetailedStatistics',
      title: '详情统计',
    });
    questionReviewStore.paperId = paperId.value
    questionReviewStore.questionId = row.id
  router.push({name:'DetailedStatistics',params:{paperId:row.id,questionId:row.id}})  

}

//考试统计
const examStatistics=()=>{ 
  console.log('考试统计');
  tabsStore.addTab({
      name: 'ExaminationStatistics',
      title: '考试统计',
    });
    questionReviewStore.paperId = paperId.value
    questionReviewStore.questionId = ''
  router.push({name:'ExaminationStatistics',params:{paperId:paperId.value}})
}
//发布补考
const publishAgain=()=>{ 
  console.log('发布补考');
  tabsStore.addTab({
      name: 'PublishAgain',
      title: '发布补考',
    });
  router.push({name:'PaperStore'})
}
//导出成绩  
const exportScore=()=>{ 
  console.log('导出成绩');
}


onMounted(() => { 
  getReviewData()
})


</script >
<style lang="less" scoped>
.right-div .el-input {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
}
.right-div .el-input :deep(.el-input__wrapper) {
 // background-color: #f3f4f6;
  border: none;
  border-radius: 20px;
  box-shadow: none;
}
.el-select :deep(.el-input__wrapper) {
  background-color: #f3f4f6;
  border: none;
  box-shadow: none;
}
/** 去除点击时的黑色边框 */
.el-tooltip__trigger:focus {
  outline: none; // unset 这个也行
}

.el-table :deep(th.el-table__cell) {
  background-color: #f9fafb;
  font-weight: 600;
}
</style>